<template>
	<view class="Lu-mer-box">
		<view class="Lu-mer-header">
			<view class="Lu-mer-back" @click="navback()">
				<text class="iconfont icon-fanhui"></text>
			</view>
			<view class="Lu-mer-proimg">
				<image class="Lu-mer-img" :src="apiUrl + merchantInfor.pic"></image>
			</view>
			<view class="Lu-mer-title">
				<view class="Lu-mer-name">{{merchantInfor.name}}</view>
				<view class="Lu-mer-introduce">商家介绍：{{merchantInfor.describe}}</view>
				<view class="Lu-mer-adress clearfix">
					<text class="iconfont icon-dingwei fl" @click="openaddress(merchantInfor.address)">{{merchantInfor.address}}</text>
					<text class="iconfont icon-phone fr" @click="gophone(merchantInfor.phone)">{{merchantInfor.phone}}</text>
				</view>
			</view>
		</view>
		<view class="Lu-mer-body">
			<view class="Lu-mer-bodytit">
				商品列表
			</view>
			<view class="Lu-mer-Courses">
				<view class="Lu-mer-Course clearfix" v-for="(item,index) in merchantInfor.agent_goods_list" :key="index" @click="navTo(item)">
					<view class="Lu-mer-CourseImg fl">
						<image class="Lu-mer-img" mode="aspectFill" :src="apiUrl + item.course_pic"></image>
					</view>
					<view class="Lu-mer-infor fl">
						<view class="Lu-mer-currtitle">{{item.course_name}}</view>
						<view class="Lu-mer-currVip">
							<text class="iconfont icon-xsm">{{item.people_num}}名会员加入</text>
						</view>
						<view class="Lu-mer-introduction" v-html='item.course_class_details'></view>
						<view class="Lu-mer-prices clearfix">
							<view class="Lu-mer-price fl">￥{{item.course_platform_price}}</view>
							<view class="Lu-mer-buy fr">立即抢购</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default{
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl'])
		},
		data(){
			return{
				agent_id:'',
				merchantInfor:{},
				spjs:''
			}
		},
		onLoad: function(option) {
			this.agent_id = option.id;
			this.wxgetmerchantInfor()
		
		},
		mounted() {
			
		},
		methods:{
			openaddress:function(address){
				
				uni.request({
					url:"https://restapi.amap.com/v3/geocode/geo",
					method:'GET',
					data:{
						key:'aff033baecb1fc92b78eac0666575b72',
						address:address
					},
					success: (res) => {
						console.log(res.data.geocodes[0].location.split(",")[0])
						uni.openLocation({
						    latitude: Number(res.data.geocodes[0].location.split(",")[1]),
						    longitude: Number(res.data.geocodes[0].location.split(",")[0]),
							name:address,
						    success: function (res) {
						        console.log(res);
						    }
						});
					}
				})
				
					// uni.openLocation({
					//     latitude: latitude,
					//     longitude: longitude,
					//     success: function (res) {
					//         console.log(res);
					//     }
					// });
					
					
			
				console.log(address)
			},
			gophone:function(phone){
				uni.makePhoneCall({
				 	
				 	// 手机号
				    phoneNumber: phone, 
				
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
				
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
					
				  });
			},
			navback(){
				uni.navigateBack({
					delta:1
				})
			},
			wxgetmerchantInfor:function(){
				uni.request({
					url:this.apiUrl+ 'api/get_agent_info',
					data:{
						agent_id:this.agent_id
					},
					method:'POST',
					header:{
						openid:this.openId
					},
					success: (res) => {
						this.merchantInfor = res.data.data
						// this.spjs = res.data.data.course_class_details.replace(/<[^>]+>/g, "")
						// console.log(this.spjs)
					}
				})
			},
			navTo:function(item) {
				uni.navigateTo({
					url: `/pages/classification/course?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.Lu-mer-box{
		.Lu-mer-header{
			position: relative;
			.Lu-mer-back{
				position: absolute;
				top: 60rpx;
				left: 0;
				z-index: 5;
				margin: 0 30rpx;
				font-size: 30rpx;
				background-color: #999;
				border-radius: 50%;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				text{
					color: #fff;
				}
			}
			.Lu-mer-proimg{
				width: 100%;
				.Lu-mer-img{
					width: 100%;
				}
			}
			.Lu-mer-title{
				padding: 20rpx 30rpx;
				background-color: #fff;
				.Lu-mer-name{
					font-size: 36rpx;
					color: #333333;
				}
				.Lu-mer-introduce{
					font-size: 28rpx;
					color: #999999;
					margin: 20rpx 0;
				}
				.Lu-mer-adress{
					font-size: 28rpx;
					color: #999999;
					text{
						font-size: 28rpx !important;
					}
				}
			}
		}
		.Lu-mer-body{
			margin: 20rpx;
			padding-top: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			.Lu-mer-bodytit{
				
				background-image: url(~@/static/image/classific/bg22.png);
				background-size: 240rpx 80rpx;
				background-repeat: no-repeat;
				height: 80rpx;
				width: 240rpx;
				line-height: 70rpx;
				text-align: center;
				margin: 0 auto;
				
				font-size: 34rpx;
				color: #fff;
			}
			.Lu-mer-Courses{
				margin-top: 20rpx;
				.Lu-mer-Course{
					padding: 20rpx 0 20rpx 20rpx;
					.Lu-mer-CourseImg{
						width: 180rpx;
						height: 180rpx;
						.Lu-mer-img{
							width: 100%;
							height: 100%;
						}
					}
					.Lu-mer-infor{
						margin-left: 30rpx;
						width: 480rpx;
						.Lu-mer-currtitle{
							font-size: 30rpx;
							color: #333333;
							
						}
						.Lu-mer-currVip{
							height: 40rpx;
							line-height: 40rpx;
							text{
								font-size: 24rpx;
								color: #666666;
							}
						}
						.Lu-mer-introduction{
							font-size: 24rpx;
							color: #999999;
							margin-top: 8rpx;
						}
						.Lu-mer-prices{
							.Lu-mer-price{
								font-size: 38rpx;
								color: #ff3e3e;
							}
							.Lu-mer-buy{
								background-image: url(~@/static/image/classific/bg11.png);
								background-repeat: no-repeat;
								background-size: 150rpx 60rpx;
								height: 60rpx;
								line-height: 50rpx;
								width: 150rpx;
								font-size: 26rpx;
								color: #fff;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
</style>
